<script setup>
import logo from '@/assets/logo.png';

import { usePlayerStateStore } from "@/stores/playerState";

const playerStore = usePlayerStateStore();

const lyric_list = computed(() => {
    let lrc_all = [];
    const lrc = playerStore.curPlayMusic.lyric;
    const regex = /(\d{2}):(\d{2})\.(\d{1,3})/;
    console.log(playerStore.curPlayMusic.title, "=>", lrc);
    lrc.split('\n').forEach(l => {
        const t = l.split(']');
        const time = t[0].slice(1);
        const text = t[1];
        if (regex.test(time)) {
            let [min, sec, mil] = time.match(regex).slice(1, 4);
            lrc_all.push({
                sec: parseInt(min) * 60 + parseInt(sec) + parseInt(mil) / 1000,
                time: time,
                text: text,
            });
        }
    });
    return lrc_all;
});

const lyric_cur_idx = ref(0);
computed(() => (i) => {
    // console.log('is_cur',lyric_list);
    if (!lyric_list.value) return false;
    if (i >= (lyric_list.value.length - 1)) return true;
    // return false;
    return lyric_list.value[i].sec <= lyric_time.value && lyric_list.value[i + 1].sec > lyric_time.value;
});

var _lyric_timer = null;  // 定时查询的时钟
var lyric_time = ref(0);  // 当前歌曲的进度，浮点数
var lyric_scroll = ref(null);

onMounted(() => {
    var lyric_scroll_eles = document.getElementsByClassName('lyric_ty');
    _lyric_timer = setInterval(() => {
        if (!playerStore.curPlayer) return;
        lyric_time.value = playerStore.curPlayer.seek() + 1;
        // idx
        if (lyric_list.value.length > 0) {
            let i = 0;
            for (; i < lyric_list.value.length - 1; i++) {
                if (lyric_list.value[i].sec <= lyric_time.value && lyric_list.value[i + 1].sec > lyric_time.value) {
                    break;
                }
            }
            lyric_cur_idx.value = i;
            // console.log(i);
            // 获取元素的位置
            if( i < lyric_scroll_eles.length ){
                var posy = lyric_scroll_eles[i].offsetTop - 200;
                if(posy < 0) posy = 0;
                // lyric_scroll.value.scrollTo(0, posy);
                lyric_scroll.value.scrollTo({top: posy, behavior: 'smooth'});
            }
            
        }
    }, 1000);
});
onUnmounted(() => {
    clearInterval(_lyric_timer);
});

</script>
<template>
    <n-flex align="center" justify="space-around" class="w-full h-full">
        <n-flex vertical class="w-4/12 p-8 h-full">
            <div class="flex-grow"></div>
            <img :src="playerStore.curPlayMusic.cover.length > 0 ? playerStore.curPlayMusic.cover : logo" alt="player"
                class=" w-full aspect-square rounded opacity-70" />
            <div class="text-2xl font-bold">{{ playerStore.curPlayMusic.title }}</div>
            <div>{{ playerStore.curPlayMusic.artist }}</div>
            <div>{{ playerStore.curPlayMusic.album }}</div>
            <div class="flex-grow"></div>
        </n-flex>
        <n-flex vertical class="w-7/12 p-8 h-full">
            <n-scrollbar class="h-full pt-2 pb-2 bg-gray-400 bg-opacity-50 text-center rounded" ref="lyric_scroll">
                <div style="height: 200px; line-height: 200px; text-align: center;">-------- 歌  词 --------</div>
                <div class="p-1 m-1 font-normal lyric_ty" v-for="(l, i) in lyric_list" :key="i"
                    :class="lyric_cur_idx == i ? ' bg-blue-50 bg-opacity-60 text-2xl rounded font-bold my-shadow' : ''">{{ l.text
                    }}</div>
                <div style="height: 200px; line-height: 200px; text-align: center;" v-show="lyric_list.length > 0">-------- 我有底线 --------</div>
            </n-scrollbar>
        </n-flex>
    </n-flex>
</template>

<style scoped>
.my-shadow {
    text-shadow: 0 0 4px #333, /* 模拟第一层发光 */
    0 0 6px #ff00de; /* 最外层发光颜色可以更明显一些 */
}

</style>